<template>
	<view>
		<!-- 页面注册板块 -->
		<u-form :model="form" ref="uForm" class="form">
			<u-form-item label="昵称" prop="xingming" labelWidth="160" leftIcon="account">
				<u-input v-model="form.xingming" class="form-item" placeholder="请输入你的名字" />
			</u-form-item>
			<u-form-item label="年龄" prop="age" labelWidth="160" leftIcon="hourglass-half-fill">
				<u-input v-model="form.age" class="form-item" placeholder="请输入你的年龄" />
			</u-form-item>
			<u-form-item label="账号" prop="zhanghao" labelWidth="160" leftIcon="order">
				<u-input v-model="form.zhanghao" class="form-item" placeholder="请输入你的账号" />
			</u-form-item>
			<u-form-item label="登录密码" prop="mima" labelWidth="160" leftIcon="lock">
				<u-input v-model="form.mima" class="form-item" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="确认密码" prop="rmima" labelWidth="160" leftIcon="lock">
				<u-input v-model="form.rmima" class="form-item" placeholder="请再次确认密码" />
			</u-form-item>
			<u-form-item label="用户类型">
				<u-radio-group v-model="form.leibie" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.code"
						:disabled="item.disabled" active-color="#25afa2">
						{{item.name}}
					</u-radio>
				</u-radio-group>
 
			</u-form-item>
		</u-form>
		<u-button @click="submit" class="">提交</u-button>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				form: {
					xingming: '',
					age:'',
					zhanghao: '',
					mima: '',
					rmima: '',
					leibie: 0,
				},
				list: [{
						name: '普通用户',
						code: 0,
						disabled: false //不禁用所有单选框
					},
					{
						name: '星级用户',
						code: 1,
						disabled: false
					},
					{
						name: '超级用户',
						code: 2,
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				rules: {
					// 字段名称
					mima: [{
						min: 3,
						message: '密码至少要3个字',
						trigger: 'change'
					}],
					rmima: [{
							required: true,
							message: "确认密码不能为空",
							trigger: "blur"
						},
						{
							trigger: 'change',
							validator: (rule, value, callback) => {
								if (value !== this.form.mima) {
									callback(new Error('两次输入密码不一致'))
								} else {
									callback()
								}
							}
						}
					],
					xingming: [
						// 对name字段进行长度验证
						{
							min: 3,
							message: '昵称不能少于3个字',
							trigger: 'change'
						},
						// 对name字段进行必填验证
						{
							required: true,
							message: '请填写昵称',
							trigger: ['change', 'blur']
						},
					],
					age: [
						{
							validator: (rule, value, callback) => {
							return this.$u.test.number(value);
							},
							message: '年龄必须是数字',
							trigger: ['change'],
						},
					],
					zhanghao: [{
							required: true,
							message: '请输入账号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return true;
							},
							message: '账号不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				//console.log(e);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.request({
							url: "http://localhost:9090/doRegister",
							data: this.form,
							method: "POST",
							success: (res) => {
								if (res.data.code*1 == 201) {
									//注册失败
									this.$u.toast('已存在相同的账户！')
								} else {
									//注册成功
									uni.setStorageSync("user", res.data.result)
									uni.switchTab({
										url:"/pages/ZYX/myinfo"
									})
								}
							}
						})
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
 
<style lang="scss" scoped>
	.line {
		width: 100%;
		height: 20rpx;
		background-color: #DDDDDD;
	}
 
	.form {
		width: 95%;
		margin: auto;
 
		.form-item {
			margin-left: 50rpx;
		}
	}
</style>